<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'header.php' ?>
<style>
	.outer-schedule {
		display: flex;
		justify-content: center;
		margin-right: 80px;
		margin-bottom: 20px;
	}
	.items {
		display: flex;
		flex-wrap: wrap;
		width: 900px;
		text-align: center;
		cursor: pointer;
	}
	.item {
		border: 1px solid #EDEDED;
		background: #F8FAFE;
		box-sizing: border-box;
		width: 225px;
		padding-top: 10px;
	}
	.item > div {
		margin-top: 5px;
	}
	.btn-edit {
		text-align: right;
	}
	.sign-time {
		color: #428BCA;
		padding-left: 5px;
	}
	.hour-input {
		width: 80px;
	}
	.items-schedule .item .sign-time-empty, .refresh {
		padding-right: 70px;
	}
	.displaynone {
		display: none;
	}

	.outer-submit {
		display: flex;
		justify-content: center;
		margin-right: 80px;
		margin-bottom: 20px;
		/* text-align: right; */
	}
	.div-submit {
		margin-top: 20px;
		width: 900px;
		text-align: right;
	}
	.select-week {
		width: 440px !important;
		font-size: 15px;
		border: none;
		margin-bottom: 40px;
	}
</style>
<div class="page-header">
    <h1 style="font-size: 20px;">
        <a class="a-back" href="<?= admin_url('contents/grade_schedule') ?>">
            <i class="fa fa-reply"></i>
        </a>
        <?= $gradeInfo['grade_name'] ?> 作息时间
    </h1>
</div>
<div class="col-xs-12">
    <div id="schedule-form" class="form-horizontal">
		
		<!-- 兼容身份证 -->
	<?= $rmxSchool['school_from'] = ''; ?>

	<?php if(empty($rmxSchool['school_from'])): ?>
		<!-- 非学校可以编辑上课天数 -->
		<div class="form-group">
            <label class="col-sm-3 control-label no-padding-right">标题：</label>
            <div class="col-sm-6">
				<input class="form-control" name="title" 
					<?php if($rmxSchool['school_from'] && $rmxSchool['school_from'] != X_DATA_YINTONG && $rmxSchool['school_from'] != X_DATA_CHAOXING && $rmxSchool['school_from'] != X_DATA_DIANXIN): ?>
						readonly 
					<?php endif ?>
                    value="<?= isset($scheduleInfo['schedule_title']) ? $scheduleInfo['schedule_title'] : '学校课程模板' ?>"
                    placeholder="模板标题" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right">每周上课天数：</label>
            <div class="col-sm-6">
				<select class="form-control" name="week_days" 
						<?php if($rmxSchool['school_from'] && $rmxSchool['school_from'] != X_DATA_YINTONG && $rmxSchool['school_from'] != X_DATA_CHAOXING && $rmxSchool['school_from'] != X_DATA_DIANXIN): ?>
							disabled 
						<?php endif ?>
				>
                    <option value="5"
                        <?php if(isset($scheduleInfo['schedule_week_days']) && 5 == $scheduleInfo['schedule_week_days']): ?>selected<?php endif ?>>
                        5
                    </option>
                    <option value="6"
                        <?php if(isset($scheduleInfo['schedule_week_days']) && 6 == $scheduleInfo['schedule_week_days']): ?>selected<?php endif ?>>
                        6
                    </option>
                    <option value="7"
                        <?php if(isset($scheduleInfo['schedule_week_days']) && 7 == $scheduleInfo['schedule_week_days']): ?>selected<?php endif ?>>
                        7
                    </option>
				</select>
            </div>
        </div>
	<?php endif ?>
	
		<!-- 学校才支持修改星期 -->
		<div class="form-group <?= empty($rmxSchool['school_from']) ? 'hide' : '' ?>">
            <label class="col-sm-3 control-label no-padding-right">星期：</label>
            <div class="col-sm-6">
				<select name="week" class="form-control btn btn-info a-custom select-week">
					<?php foreach($scheduleList as $schedule): ?>
						<option value="<?= $schedule['id'] ?>" <?= $schedule['id'] == $scheduleId ? 'selected' : '' ?>><?= $schedule['weekChinese'] ?></option>
					<?php endforeach ?>
				</select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right">年级作息时间：</label>
			<div class="col-sm-6">
				<?php if(empty($rmxSchool['school_from']) || $rmxSchool['school_from'] == X_DATA_YINTONG || $rmxSchool['school_from'] == X_DATA_CHAOXING || $rmxSchool['school_from'] == X_DATA_DIANXIN): ?>
					<div class="btn btn-info" id="increase-schedule">添加节数</div>
					&nbsp;&nbsp;
					<div class="btn btn-danger" id="decrease-schedule">删除节数</div>
				<?php endif ?>
            </div>
        </div>
     
		<div class="outer-schedule">
			<div class="items items-schedule">
				<?php foreach($scheduleInfo['timeArr'] as $time): ?>
					<div class="item item-<?= $time['timeslotInDay'] ?>" data-interval="<?= isset($time['sign_interval']) ? $time['sign_interval'] : 10 ?>" href="#modal-schedule" data-toggle="modal">
						<div>第<span class="timeslot"><?= $time['timeslotInDay'] ?></span>节</div>
						<div>考勤时间：<span class="sign-time-empty <?= $time['sign_interval'] != 0 ? 'displaynone' : '' ?>">无</span><span class="sign-time-not-empty <?= $time['sign_interval'] == 0 ? 'displaynone' : '' ?>"><span class="sign_begin_time"><?= $time['signBeginTime'] ?></span>&nbsp;&nbsp;-&nbsp;&nbsp;<span class="sign_end_time"><?= $time['signEndTime'] ?></span></span></div>
						<div>上课时间：<span class="begin_time"><?= $time['beginTime'] ?></span>&nbsp;&nbsp;-&nbsp;&nbsp;<span class="end_time"><?= $time['endTime'] ?></span></div>
						<div>重新签到：<span class="refresh"><?= $time['refresh'] ?></span></div>
						<div class="btn-edit"><i class="fa fa-pencil blue"></i>&nbsp;&nbsp;</div>
					</div>
				<?php endforeach ?>
			</div>
		</div>	
		<div class="outer-submit">
			<div class="clearfix2 div-submit">
				<button class="btn btn-info" id="save-schedule-action">
					<i class="ace-icon fa fa-check"></i> 提交
				</button>
			</div>
		</div>

	</div>
</div>
<!-- 编辑上课时间弹窗 -->
<div id="modal-schedule" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button> <span id="school-name"></span>
					编辑第<span class="timeslot"></span>节
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">上课时间：</label>
								<div class="col-sm-6">
									<input class="hour-input hour-input-begin" type="text" name="begin_time" value=""
										<?php if($rmxSchool['school_from'] && $rmxSchool['school_from'] != X_DATA_YINTONG && $rmxSchool['school_from'] != X_DATA_CHAOXING): ?>
											readonly 
										<?php endif ?>
									/>
									&nbsp;&nbsp;-&nbsp;&nbsp;
									<input class="hour-input hour-input-end" type="text" name="end_time" value="" 
										<?php if($rmxSchool['school_from'] && $rmxSchool['school_from'] != X_DATA_YINTONG && $rmxSchool['school_from'] != X_DATA_CHAOXING): ?>
											readonly 
										<?php endif ?>
									/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">多少分钟进入考勤：</label>
								<span class="block input-icon input-icon-right pd0">
									<div class="col-sm-6">
										<input class="form-control" type="number" name="sign_interval" value="10" />
									</div>
								</span>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">考勤时间：</label>
								<span class="block input-icon input-icon-right pd0">
									<div class="col-sm-6">
										<div class="form-control sign-time sign-time-not-empty">
											<span class="sign_begin_time"></span>
											&nbsp;&nbsp;-&nbsp;&nbsp;
											<span class="sign_end_time"></span>
										</div>
										<div class="form-control sign-time sign-time-empty" style="display:none;">
											无
										</div>
									</div>
								</span>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">重新签到：</label>
								<div class="col-sm-6">
									<select class="form-control" name="refresh">
											<option value="否">否</option>
											<option value="是">是</option>
									</select>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-schedule" data-dismiss="modal" aria-hidden="true">
					<i class="ace-icon fa fa-check"></i> 确认
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 使用新的datetimepicker.js和css，解决设置不了pickerPosition -->
<link rel="stylesheet" href="<?=$staticAdminUrl?>assets/css/bootstrap-datetimepicker-new.min.css" />
<script src="<?=$staticAdminUrl?>assets/js/bootstrap-datetimepicker-new.min.js"></script>
<script type="text/javascript">
var table = "";
$(function() {
    var div = $(".items-schedule");

	// 点击编辑
	$("body").on("click", ".items-schedule .item", function() {
		var signInterval = $(this).data('interval');
		if(signInterval == 0) {
			$("#modal-schedule").find(".sign-time-not-empty").hide();
			$("#modal-schedule").find(".sign-time-empty").show();
		} else {
			$("#modal-schedule").find(".sign-time-empty").hide();
			$("#modal-schedule").find(".sign-time-not-empty").show();
		}
		var modal = $("#modal-schedule");
		modal.find(".timeslot").html($(this).find(".timeslot").html());
		modal.find("[name=begin_time]").val($(this).find(".begin_time").html());
		modal.find("[name=end_time]").val($(this).find(".end_time").html());
		modal.find(".sign_begin_time").html($(this).find(".sign_begin_time").html());
		modal.find(".sign_end_time").html($(this).find(".sign_end_time").html());
		modal.find("[name=sign_interval]").val(signInterval);
		modal.find("[name=refresh]").val($(this).find(".refresh").html());
	});
	// 实时监听interval变化
	$("[name=sign_interval]").on("input propertychange", function(){
		// 计算interval最大值
		var beginTime = $("#modal-schedule").find("[name=begin_time]").val();
		var $timeArr = beginTime.split(":");
		var $hour = parseInt($timeArr[0]);
		var $min = parseInt($timeArr[1]);
		// 总共多少分钟
		var $minCount = $hour * 60 + $min;
		
		if($(this).val() > $minCount) {
			$("[name=sign_interval]").val($minCount);
		}
		if($(this).val() < 0) {
			// tips_alert("不能小于0", false, function() {
				$("[name=sign_interval]").val(10);
			// });
			// return;
		}
		if($(this).val() == 0) {
			$("#modal-schedule").find(".sign-time-not-empty").hide();
			$("#modal-schedule").find(".sign-time-empty").show();
		} else {
			$("#modal-schedule").find(".sign-time-empty").hide();
			$("#modal-schedule").find(".sign-time-not-empty").show();
			var beginTime = $("#modal-schedule").find("[name=begin_time]").val();
			var signBeginTime = subtract_time(beginTime, $(this).val());
			$("#modal-schedule").find(".sign_begin_time").text(signBeginTime);
			$("#modal-schedule").find(".sign_end_time").text(beginTime);
		}
	});
	// 监听上课开始时间变化
	$("[name=begin_time]").on("input propertychange", function(){
		// alert($(this).val());
		var interval = $("[name=sign_interval]").val();
		var signBeginTime = subtract_time($(this).val(), interval);
		$("#modal-schedule").find(".sign_begin_time").text(signBeginTime);
		$("#modal-schedule").find(".sign_end_time").text($(this).val());
	});

	// 保存弹窗
	$("#save-schedule").click(function(){
		var modal = $("#modal-schedule");
		var timeslot = modal.find(".timeslot").html();
		var beginTime = modal.find("[name=begin_time]").val();
		var endTime = modal.find("[name=end_time]").val();
		var signBeginTime = modal.find(".sign_begin_time").html();
		var signEndTime = modal.find(".sign_end_time").html();
		var interval = modal.find("[name=sign_interval]").val();
		var refresh = modal.find("[name=refresh]").val();
		var item = $(".items-schedule").find(".item-" + timeslot);
		// console.log(item.length);
		item.data('interval', interval);
		item.find(".begin_time").html(beginTime);
		item.find(".end_time").html(endTime);
		item.find(".sign_begin_time").html(signBeginTime);
		item.find(".sign_end_time").html(signEndTime);
		item.find(".refresh").html(refresh);
		if(interval == 0) {
			item.find(".sign-time-not-empty").hide();
			item.find(".sign-time-empty").show();
		} else {
			item.find(".sign-time-empty").hide();
			item.find(".sign-time-not-empty").show();
		}
	});
   
	// 保存数据
	$("#save-schedule-action").click(function(){
		var submitUrl = "<?=admin_url('schedule/save_schedule_action')?>";
		var timeArr = [];
		$(".items-schedule .item").each(function(){
			timeArr.push({
				'timeslot': $(this).find(".timeslot").html(),
				'sign_interval': $(this).data("interval"),
				'begin_time': $(this).find(".begin_time").html(),
				'end_time': $(this).find(".end_time").html(),
				'refresh': $(this).find(".refresh").html()
			});
		});
		// console.log(timeArr);
		var data = {
			"id": <?= $scheduleInfo['id'] ?>,
			"grade_id": <?= $gradeInfo['id'] ?>,
			"title": $("[name=title]").val(),
			"week_days": $("[name=week_days]").val(),
			"time_arr": timeArr,
		};
		ajax_post(submitUrl, data, function(res) {
			if (res.success) {
				window.location.href = "<?=admin_url('contents/grade_schedule') ?>";
			}
		});
	});

	// 实时监听星期week变化
	$("[name=week]").change(function(){
		var id = $(this).val();
		// alert(id);
		window.location.href = "<?= admin_url('contents/grade_schedule_detail/') . $gradeInfo['id'] . '/' ?>" + id;
	});
	var div = $(".items-schedule");
    // 添加节数
    $("#increase-schedule").click(function() {
        // 当前节数
        var count = $('.items-schedule .item').length;
        // 下一节数
        var next = count + 1;
        div.append('<div class="item item-' + next + '" data-interval="10" href="#modal-schedule" data-toggle="modal">\
			<div>第<span class="timeslot">' + next + '</span>节</div>\
			<div>考勤时间：<span class="sign-time-empty displaynone">无</span><span class="sign-time-not-empty"><span class="sign_begin_time">11:50</span>&nbsp;&nbsp;-&nbsp;&nbsp;<span class="sign_end_time">12:00</span></span></div>\
			<div>上课时间：<span class="begin_time">12:00</span>&nbsp;&nbsp;-&nbsp;&nbsp;<span class="end_time">13:00</span></div>\
			<div>重新签到：<span class="refresh">否</span></div>\
			<div class="btn-edit"><i class="fa fa-pencil blue"></i>&nbsp;&nbsp;</div>\
		</div>');
    });
    // 删除节数
    $("#decrease-schedule").click(function() {
        $('.items-schedule .item:last').remove();
    });
})
// 某时间点前移多少分钟，格式‘09:00’
function subtract_time($time, $offset) {
	var $timeArr = $time.split(":");
	var $hour = parseInt($timeArr[0]);
	var $min = parseInt($timeArr[1]);
	// 总共多少分钟
	var $minCount = $hour * 60 + $min;
	var $minCountNew = $minCount - $offset;
	if($minCountNew <= 0) {
		return "00:00";
	}
	var $hourNew = Math.floor($minCountNew / 60);

	var $minNew = $minCountNew % 60;
	// console.log($minNew);
	if($minNew < 10) {
		$minNew = '0' + $minNew;
	}
	if($hourNew < 10) {
		$hourNew = '0' + $hourNew;
	}
	return $hourNew + ':' + $minNew;
}
</script>